<template>
  <div class="AddOrUpdate_main add_container column_one">
    <div class="main_main">
      <el-form ref="form" :model="formData" :rules="rules" :inline="true">
        <el-form-item label="设备信息" prop="deviceName">
          <el-input v-model="formData.deviceName" placeholder="暂无" disabled />
        </el-form-item>
        <el-form-item label="原始错误" prop="content">
          <el-input v-model="formData.content" placeholder="暂无" type="textarea" disabled />
        </el-form-item>
        <el-form-item label="报警提示" prop="hint">
          <el-input
            v-model="formData.hint"
            placeholder="请输入"
            maxlength="200"
            show-word-limit
            type="textarea"
            clearable
          />
        </el-form-item>
        <el-form-item label="解决方案" prop="solution">
          <el-input
            v-model="formData.solution"
            maxlength="200"
            show-word-limit
            placeholder="请输入"
            type="textarea"
            clearable
          />
        </el-form-item>
        <!-- <div class="main_gradeDictCode_statistics"> -->
        <el-form-item label="报警等级" prop="gradeDictCode">
          <DictSelect
            :band-value.sync="formData.gradeDictCode"
            dict-type="gradeDictCode"
          />
          <!-- <el-select v-model="formData.gradeDictCode" clearable>
            <el-option
              v-for="item in errorLevelOptions"
              :key="item"
              :label="item"
              :value="item"
            />
          </el-select> -->
        </el-form-item>
        <el-form-item label="是否显示" prop="isShow">
          <el-radio-group v-model="formData.isShow">
            <el-radio label="1">显示</el-radio>
            <el-radio label="0">不显示</el-radio>
          </el-radio-group>
          <span style="color: #CCCCCC;">（开启显示的报警信息会在设备报警统计模块展示详情）</span>
        </el-form-item>

        <!-- <div class="main_statistics">
            <el-form-item label="是否统计">
              <el-tooltip class="main_statistics_tooltip_item " effect="dark" placement="top-start">
                <div class="main_statistics_icon el-icon-info" />
                <div slot="content" class="main_statistics_icon_text">
                  <p class="el-icon-info" />
                  <p>开启统计的报警信息会在设备报警信息模块展示详情</p>
                </div>
              </el-tooltip>
              <el-switch
                v-model="formData.isShow"
                active-value="1"
                inactive-value="0"
                active-color="#13ce66"
                inactive-color="#999999"
              />
            </el-form-item>
          </div> -->
        <!-- </div> -->
      </el-form>
    </div>
    <div class="main_bottom">
      <el-button type="cancel" @click.stop="cancel">取消</el-button>
      <el-button @click.stop="onSubmit">保存</el-button>
    </div>
  </div>
</template>

<script>
import { edit } from '@/api/equipmentManage/baseInfo/equipmentAlarmInfo'
export default {
  name: 'AddOrUpdate',
  props: {
    layerid: {},
    id: {},
    defaultValue: {}
  },
  data() {
    return {
      formData: {
        id: undefined,
        deviceName: undefined,
        content: undefined,
        hint: undefined,
        solution: undefined,
        gradeDictCode: undefined,
        isShow: '1'
      },
      rules: {
      },
      errorLevelOptions: ['A', 'B', 'C', 'D']
    }
  },
  created() {
    Object.keys(this.defaultValue).forEach(key => { // 给右边数据赋值
      this.formData[key] = this.defaultValue[key]
    })
  },
  methods: {
    onSubmit() {
      this.$refs['form'].validate(valid => {
        if (valid) {
          edit(this.formData).then(res => {
            this.$message({
              message: res.msg,
              type: 'success'
            })
            this.$layer.close(this.layerid) // 关闭弹框
            this.$parent.refresh() // 调用父组件的刷新方法
          })
        }
      })
    },
    cancel() {
      this.$layer.close(this.layerid)// 关闭弹框
    }
  }
}
</script>

<style lang="less" scoped>
.main_gradeDictCode_statistics {
  display: flex;
}
.main_statistics {
  display: flex;
  /deep/ .el-form-item__label {
    // width: 66px !important;
    padding-right: 0px !important;
  }
  /deep/.el-form-item__content {
    display: flex;
    margin-top: 9px;
  }
  /deep/ .main_statistics_icon {
    margin-left: 3px;
    margin-right: 37px;
    color: rgb(57, 125, 254);
  }
  /deep/.el-switch {
    bottom: 4px !important;
  }
}
</style>
<style>
.main_statistics_icon_text {
  display: flex;
}
.main_statistics_icon_text p:nth-of-type(1) {
  padding-right: 3px;
  padding-top: 1px;
}
</style>
